<template>
  <page-main>
    <div class="statistics">
      <crad
        title="部门数量"
        tip="Number of departments"
        :num="statistics_data.teamNumber"
        type="blue"
        icon="el-icon-office-building"
      />
      <crad
        title="用户数量"
        tip="Number of users"
        :num="statistics_data.userNumber"
        type="orange"
        icon="el-icon-user"
      />
      <crad
        title="部门空间占用"
        :tip="'共有' + statistics_data.userTeamSpaceInfo.FileNumber + '个文件'"
        :num="FileUtils.fileSizeToStr(statistics_data.userTeamSpaceInfo.SpaceSize)"
        type="blue"
        icon="el-icon-partly-cloudy"
      />
      <crad
        title="用户空间占用"
        :tip="'共有' + statistics_data.userSpaceInfo.FileNumber + '个文件'"
        :num="FileUtils.fileSizeToStr(statistics_data.userSpaceInfo.SpaceSize)"
        type="orange"
        icon="el-icon-cloudy"
      />
    </div>
    <div class="log">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-card class="log-card">
            <div slot="header" class="clearfix">
              <span>登录日志</span>
              <div class="log-login-input">
                <!-- <el-input placeholder="检索对应用户" v-model="log_login_search_input" clearable /> -->
              </div>
              <div class="content">
                <el-table :data="log_login_data" stripe height="430">
                  <template slot="empty">
                    <span>今日似乎没有用户登录呢</span>
                  </template>
                  <el-table-column prop="userName" label="登录用户"></el-table-column>
                  <el-table-column prop="date" label="登录时间">
                    <template slot-scope="scope">{{FileUtils.timestampToTime(scope.row.date)}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-card class="log-card">
            <div slot="header" class="clearfix">
              <span>操作日志</span>
              <div class="log-login-input">
                <!-- <el-input placeholder="检索对应用户" v-model="log_search_input" clearable /> -->
              </div>
              <div class="content">
                <el-table :data="log_data" stripe height="430">
                  <template slot="empty">
                    <span>今日系统似乎没有被操作呢</span>
                  </template>
                  <el-table-column prop="userName" label="操作用户"></el-table-column>
                  <el-table-column prop="operModul" label="模块名称"></el-table-column>
                  <el-table-column prop="operType" label="模块类型"></el-table-column>
                  <el-table-column prop="operDesc" label="模块说明"></el-table-column>
                  <el-table-column prop="date" label="操作时间">
                    <template slot-scope="scope">{{FileUtils.timestampToTime(scope.row.date)}}</template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </page-main>
</template>


<script>
import { getLogList, getLoginLogList, getStatistics } from '@/api/requests/console'
import FileUtils from '@/util/file.js'
export default {
  components: {
    'crad': () => import('@/components/card.vue')
  },
  data () {
    return {
      FileUtils,
      statistics_data: {},
      log_data: [],
      log_login_data: [],
      log_search_input: '',
      log_login_search_input: '',
    }
  },
  created () {
    this.console_Statistics_Date()
    this.console_Log_Data()
    this.console_Log_Login_Data()
  },
  methods: {
    console_Statistics_Date () {
      getStatistics().then(res => {
        console.log(res.data)
        this.statistics_data = res.data
        console.log(this.statistics_data)
      })
    },
    console_Log_Data () {
      getLogList().then(res => {
        this.log_data = JSON.parse(res.data)
      })
    },
    console_Log_Login_Data () {
      getLoginLogList().then(res => {
        this.log_login_data = JSON.parse(res.data)
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.statistics {
    display: flex;
    justify-content: space-between;
}
.log {
    margin-top: 30px;
}
.log-login-input {
    width: 50%;
    float: right;
}
span {
    line-height: 40px;
}
.log-card {
    height: 50vh;
}
</style>
